import { memo, useEffect } from 'react'
import { StationDevice, StationGround, StationParkType, StationStatus, getStationInfo } from '../services'
import { useRequest } from 'ahooks'
import { Descriptions, Modal, Space, Spin, Tag } from 'antd'
import dayjs from 'dayjs'
import { Access } from '@umijs/max'

export interface DetailModalProps {
  id?: string
  onCancel?: () => void
}

const DetailModal: React.FC<DetailModalProps> = props => {
  const { data, loading, run, mutate } = useRequest(getStationInfo, {manual: true})

  const onCancel = () => {
    props.onCancel?.()
  }

  useEffect(() => {
    if (props.id) {
      run({stubGroupId: props.id})
    } else {
      mutate(undefined)
    }
  }, [props.id])

  return (
    <Modal
      title='详情'
      open={!!props.id}
      onCancel={onCancel}
      footer={false}
      width={800}
    >
      <Spin spinning={loading}>
        <Descriptions column={2}>
          <Descriptions.Item label='场站名称'>{data?.data?.stationName}</Descriptions.Item>
          <Descriptions.Item label='推荐码'>{data?.data?.inviteCode}</Descriptions.Item>
          <Descriptions.Item label='扣除流量费金额'>{data?.data?.networkFee}元</Descriptions.Item>
          <Descriptions.Item label='流量费开始收费时间'>{data?.data?.networkDay}</Descriptions.Item>
          <Descriptions.Item label='私桩主'>{data?.data?.ownerName}</Descriptions.Item>
          <Descriptions.Item label='开放模式'>{data?.data?.openTime ? JSON.parse(data?.data?.openTime).openType : '--'}</Descriptions.Item>
          <Descriptions.Item label='电费账户模式'>{data?.data?.electricType === 1 ? '平台收取' : '平台不收取'}</Descriptions.Item>
          <Descriptions.Item label='桩主共享优惠'>{data?.data?.shareIn === 1 ? '参与' : '不参与'}</Descriptions.Item>
          <Descriptions.Item label='场站地址'>{data?.data?.address}</Descriptions.Item>
          <Descriptions.Item label='经线'>{data?.data?.longitude}</Descriptions.Item>
          <Descriptions.Item label='纬线'>{data?.data?.latitude}</Descriptions.Item>
          <Descriptions.Item label='是否支持开票'>{data?.data?.invoice === 1 ? '支持' : '不支持'}</Descriptions.Item>
          <Descriptions.Item label='营业时间'>{data?.data?.serviceTime}</Descriptions.Item>
          <Descriptions.Item label='评分'>{data?.data?.score ? `${data?.data?.score}分` : '--'}</Descriptions.Item>
          <Descriptions.Item label='配套设施'>{data?.data?.deviceList ? data?.data.deviceList.split(',').map((it: any) => StationDevice[it]) : '--'}</Descriptions.Item>
          <Descriptions.Item label='直流设备'>{data?.data?.acNum}个</Descriptions.Item>
          <Descriptions.Item label='交流设备'>{data?.data?.dcNum}个</Descriptions.Item>
          <Descriptions.Item label='额定功率'>{data?.data?.kw}kW</Descriptions.Item>
          <Descriptions.Item label='停车场类型'>{data?.data?.ground ? StationGround[data?.data.ground] : '--'}</Descriptions.Item>
          <Descriptions.Item label='停车费'>{data?.data?.parkType ? StationParkType[data?.data.parkType] : '--'}</Descriptions.Item>
          <Descriptions.Item label='停车费说明'>{data?.data?.parkInfo || '--'}</Descriptions.Item>
          <Descriptions.Item label='状态'>{data?.data?.status ? StationStatus[data?.data.status] : '--'}</Descriptions.Item>
          <Descriptions.Item label='公告'>{data?.data?.notice || '--'}</Descriptions.Item>
          <Descriptions.Item label='创建时间'>{data?.data?.createTime ? dayjs(data?.data.createTime).format('YYYY-MM-DD') : '--'}</Descriptions.Item>
          <Descriptions.Item label='平台联系方式'>{data?.data?.managerInfo || '--'}</Descriptions.Item>
          <Descriptions.Item label='桩主联系方式'>{data?.data?.managerInfo2 || '--'}</Descriptions.Item>
        </Descriptions>
      </Spin>
    </Modal>
  )
}

export default memo(DetailModal)
